import React, { Component,createRef } from 'react'
import {List,SearchBar, NavBar,InfiniteScroll,Loading ,SwipeAction, Toast,Modal} from "antd-mobile";
import { withRouter } from 'react-router';
import Item from 'antd-mobile/es/components/dropdown/item';
import axios from "../../../../http";
import Qs from 'qs'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { PullStatus } from 'antd-mobile/es/components/pull-to-refresh'
import { load } from 'react-cookies';

import {PRIVATE_ROUTE} from "../../../../route.constants";


const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading</span>
            <Loading />
          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    )
  }




class NoteMine extends Component {
    constructor(props) {

        super(props);
        // hasMore:是否继续监听滚动事件
        // loadMore 监听的ajax请求

        this.state={dataList:[], title:'',searchBarValue:'',data:[],hasMore:true,count:1};

    };
    loadMore=()=>{
        this.setState({count:this.state.count+1},()=>{this.loadData(this.state.count)})
        
    }


    deleteById=(id)=>{

        axios.post('api/oa/note/deleteById', Qs.stringify({
            id:id
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.loadData(1);
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });
            let state={};
            state["count"]=1;
            this.setState(state,()=>{this.loadData(1)})

    }
    showSuccessMessage (systemMessage){
        // message.success(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };
    showErrorMessage (systemMessage){
        // message.error(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };
    loadData=(page)=>{

       
       axios.post('api/oa/note/findByPage', Qs.stringify({
            page: page-1,
            size: 5,
            title:this.state.title
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data
            
                let  dataList=data.data.content;
               

                let totalElements=data.data.totalElements;


                if(page==1){
                // this.setState({data:this.state.dataList});
                this.setState({data:dataList,dataList:dataList,totalElements:totalElements,hasMore:dataList.length>0});

                }else{
                    this.setState({data:[...this.state.data,...dataList],dataList:dataList,totalElements:totalElements,hasMore:dataList.length>0});
                }
               
                
            })
            .catch(function (error) {
                console.log(error);
            });
        

    }
    
 
    
    searchBarOnChange=(value)=>{
        let state={};
        state["title"]=value;
        state["count"]=1;
        this.setState(state,()=>{this.loadData(1)})
        
        
    }
    componentDidMount(){
        console.log(this.state)
        this.loadData(1)
        
       // this.setState((state)=>{return {data:dataList};});
       
             
   }

    goBack=()=>{
        
        this.props.history.push({pathname:"/note"})
    }

    render(){

        
        return (
            <div>
                <ul>
						<li>数据条数：{this.state.totalElements}</li>
						
					</ul>
               <NavBar onBack={this.goBack}>请选择笔记</NavBar>
               <SearchBar placeholder="输入标题搜索" onChange={this.searchBarOnChange} />
              
                
                    <List>
                        {this.state.data.map((item,index) => (
                        <SwipeAction
                        key={item.id}
                        rightActions={[
                            {
                                key: 'edit',
                                text: '编辑',
                                color: 'primary',
                                onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                              },
                           
                            {
                              key: 'delete',
                              text: '删除',
                              color: 'danger',
                              onClick:()=> {Modal.confirm({
                                content: '是否删除笔记',
                                onConfirm: async () => {
                                  await this.deleteById(item.id)
                                  Toast.show({
                                    icon: 'success',
                                    content: '提交成功',
                                    position: 'bottom',
                                  })
                                },
                            })}
                            }
                            ,                       
                          ]}
                        >
                        <List.Item key={item.id}>   
                        {item.title}  
                        </List.Item>
                        </SwipeAction>
                        ))}
                    </List>
                    <InfiniteScroll loadMore={this.loadMore} hasMore={this.state.hasMore} threshold={250} style={{marginbottom : '3cm' }}>
                        <InfiniteScrollContent hasMore={this.state.hasMore} />
                    </InfiniteScroll>
                   
            </div>
        )
    }
}

export default withRouter(NoteMine)